import 'package:flutter/material.dart';
import 'package:practise/ui/colors.dart';

class SlidePlayList extends StatelessWidget {
  final data;

  SlidePlayList(this.data);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
          color: ProjectColors.CARD_DARK,
          borderRadius:
              BorderRadius.only(bottomLeft: Radius.circular(10), bottomRight: Radius.circular(10))),
      padding: EdgeInsets.only(top: 15, bottom: 15),
      child: Column(
        children: [
          _getHeader(),
          _getPlayList()
        ],
      ),
    );
  }

  Widget _getHeader() {
    final title = data['uiElement']['subTitle']['title'];
    final more = data['uiElement']['button']['text'];
    return Container(
      padding: EdgeInsets.fromLTRB(15, 8, 15, 6),
      child: Row(
        children: [
          Text(title,
              style: TextStyle(color: Colors.white, fontSize: 17, fontWeight: FontWeight.bold)),
          Expanded(flex: 1, child: Container()),
          Container(
            padding: EdgeInsets.fromLTRB(10, 4, 6, 4),
            decoration: BoxDecoration(
                border: Border.all(color: Colors.white60, width: 1),
                borderRadius: BorderRadius.circular(20)),
            child: Row(
              children: [
                Text(more, style: TextStyle(color: Colors.white, fontSize: 10)),
                Icon(Icons.keyboard_arrow_right, color: Colors.white, size: 12)
              ],
            ),
          )
        ],
      ),
    );
  }

  Widget _getPlayList() {
    List list = data['creatives'];
    return Container(
      height: 170,
      child: ListView.builder(
        itemBuilder: (context, index) {
          return _getItemView(list[index]);
        },
        padding: EdgeInsets.fromLTRB(15, 10, 15, 10),
        itemCount: list.length,
        scrollDirection: Axis.horizontal,
      ),
    );
  }

  Widget _getItemView(data) {
    final url = data['imageUrl'];
    final playCount = "${((data['playCount'] / 10000) as double).floor().toString()}万";
    final title = data['title'];
    return Container(
      width: 110,
      margin: EdgeInsets.only(right: 10),
      child: Column(
        children: [
          Stack(
            clipBehavior: Clip.none,
            children: [
              Positioned(
                  left: 10,
                  top: -4,
                  child: Container(
                    width: 90,
                    height: 90,
                    decoration: BoxDecoration(
                        color: Colors.white30, borderRadius: BorderRadius.circular(8)),
                  )),
              ClipRRect(
                borderRadius: BorderRadius.circular(10),
                child: Image.network(url, fit: BoxFit.cover),
              ),
              Positioned(
                  top: 3,
                  right: 3,
                  child: Container(
                    padding: EdgeInsets.fromLTRB(6, 1, 6, 1),
                    decoration: BoxDecoration(
                        color: Colors.black54, borderRadius: BorderRadius.circular(8)),
                    child: Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Icon(
                          Icons.play_arrow,
                          color: Colors.white,
                          size: 8,
                        ),
                        Text(
                          playCount,
                          style: TextStyle(fontSize: 10, color: Colors.white),
                        )
                      ],
                    ),
                  ))
            ],
          ),
          Padding(padding: EdgeInsets.only(top: 5)),
          Text(
            title,
            style: TextStyle(
              color: Colors.white,
              fontSize: 12,
            ),
            maxLines: 2,
            overflow: TextOverflow.ellipsis,
          )
        ],
      ),
    );
  }
}
